<template>
  <div class="goods">
    <BreadCrumb :item="['商品管理', '商品列表']"></BreadCrumb>
    <el-card>
      <div slot="header" class="clearfix">
        <el-input
          placeholder="请输入内容"
          class="input-with-select"
          v-model="searchContent"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="searchGoods"
          ></el-button>
        </el-input>
        <el-button type="primary" @click="$router.push('/add')"
          >添加用户</el-button
        >
      </div>

      <!-- 表格 -->
      <el-table
        :data="goodsList"
        :pagesize="pagesize"
        border
        style="width: 100%"
        :stripe="true"
      >
        <el-table-column type="index" width="48px"> </el-table-column>
        <el-table-column prop="goods_name" label="商品名称"> </el-table-column>
        <el-table-column prop="goods_price" label="商品价格(元)" width="90">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量" width="90">
        </el-table-column>
        <el-table-column prop="upd_time" label="创建时间" width="170">
          <template #default="{ row }">
            <span>{{
              $dayjs(row.upd_time).format('YYYY-MM-DD HH:mm:ss')
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" icon="el-icon-edit" size="mini"
              >编辑</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeGoods(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
import { delGoods, getGoodsList } from '@/api/goods'
export default {
  name: 'Goods',
  data() {
    return {
      goodsList: [],
      pagenum: 1,
      pagesize: 10,
      total: 0,
      searchContent: '',
    }
  },
  methods: {
    async initGoodsList() {
      const res = await getGoodsList({
        query: this.searchContent,
        pagenum: this.pagenum,
        pagesize: this.pagesize,
      })
      // console.log(res)
      this.goodsList = res.data.goods
      this.total = res.data.total
    },
    // 每页显示条数变化
    handleSizeChange(val) {
      this.pagesize = val
      this.initGoodsList()
    },
    // 当前页数发生变化
    handleCurrentChange(val) {
      this.pagenum = val
      this.initGoodsList()
    },
    // 搜索
    searchGoods() {
      this.initGoodsList()
    },
    // 删除指定商品
    async removeGoods(row) {
      this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(async () => {
          await delGoods(row.goods_id)
          this.$message({
            type: 'success',
            message: '删除成功!',
          })
          this.initGoodsList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
  created() {
    this.initGoodsList()
  },
}
</script>

<style lang="less" scoped>
.goods {
  .el-input {
    width: 33%;
    margin-right: 20px;
  }
  .el-table {
    margin-bottom: 15px;
  }
}
</style>
